<template>
    <div class="select-sex">
        <!-- 顶部背景图片 -->
        <div class="top-background">
            <img src="../assets/top.png" class="img-top">
            <div class="title">打开纸条</div>
        </div>
        <!-- 打开纸条 -->
        <div class="extract">
            <div class="warn">恭喜你</div>
            <!-- 提示 -->
            <div class="tip">抽取到一位有缘人，祝您好运！</div>
            <!-- 显示抽取到的信息 -->
            <div class="adress-select">
                <span class="address-warn">{{ personObj.contact }}</span>
            </div>
            <div class="summit">
                <span class="summit-item" @click="backhome">返回首页</span>
                <span class="summit-item put" @click="getagain">再抽一次</span>
            </div>
            <!-- 温馨提示 -->
            <div class="warn-tip">温馨提示</div>
            <div class="tip-content">文明礼貌的人和行为总能得到对方的认可，请您文明交友，礼貌待人。</div>
            <span class="report" @click="report(personObj.id)">举报</span>
            <div style="height: 25px;"></div>
        </div>
    </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
// 引入pinia
import { useUserSexStore } from '@/store';
// 引入props
import { defineProps, onMounted, ref } from 'vue';
// 引入api
import { getRandomPerson, reportUser } from '@/api';
// 使用pinia
const userSexStore = useUserSexStore();
// 获取sex属性
const selectedSex = userSexStore.sex;
// 接收父组件传来的数据
const props = defineProps({
    setShowMale: Function,
    hideLoading: Function,
    showLoading: Function,
    address: Object,
});

const personObj = ref({
    address: '',
    contact: '',
    create_time: '',
    id: '',
    sex: '',
})

// 返回首页
const backhome = () => {
    props.setShowMale('male');
}

// 点击再抽一次
const getagain = async () => {
    // 显示加载动画
    props.showLoading();
    // 等待2秒后隐藏加载动画
    setTimeout(async() => {
        // 隐藏加载动画
        props.hideLoading();
        const result = await getRandomPerson(selectedSex, props.address.value);
        if (result.code == 200) {
            personObj.value = result.data;
        }
    }, 2000);
}

onMounted( async () => {
    const result = await getRandomPerson(selectedSex, props.address.value);
    if (result.code == 200) {
        personObj.value = result.data;
    }
})


// 举报
const report = async(id) => {
    const result = await reportUser(id);
    if (result.code == 200) {
        ElNotification({
            title: 'Warning',
            message: '举报成功',
            type: 'warning',
        })
        // 跳转回首页
        props.setShowMale('male');
    }
}

</script>

<style scoped>
.select-sex {
    width: 80%;
    height: auto;
    background-color: #fff;
    border-radius: 15px;
    position: relative; /* 相对定位 */
}

.top-background {
    position: relative; /* 相对定位 */
}

.img-top {
    width: 80%;
    height: auto;
    z-index: -1;
}

.title {
    position: absolute; /* 绝对定位 */
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 90%;
    font-weight: bold;
}

/* 打开纸条 */
.warn {
    font-size: 20px;
    color: #a517e7;
    font-weight: 700;
}
/* 提示 */
.tip {
    height: 25px;
    font-size: 13px;
    font-weight: 700;
    color: black;
}


/* 获取一张纸条 */
.gain {
    font-weight: 700;
    padding: 15px;
    background-color: #ffd800;
    width: 70%;
    height: auto;
    border-radius: 25px;
    margin: 10px auto;
}

/* 提示 */
.tip {
    color: #a1a1a1;
    font-size: 12px;
    margin-top: 10px;
}
/* 显示抽取到的信息 */
.adress-select {
    display: flex;
    justify-content: center;
    align-items: center;
}
.address-warn {
    font-size: 14px;
    color: #a1a1a1;
    background-color: #f1edfc;
    height: auto;
    padding: 15px;
    border-radius: 25px;
    margin: 15px auto;
    font-size: 14px;
    color: black;
}
/* 提交 */
.summit {
    display: flex;
    justify-content: space-evenly;
}
.summit-item {
    color: #a1a1a1;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.put {
    color: #ffd800;
}

/* 温馨提示 */
.warn-tip {
    font-size: 15px;
    color: #a1a1a1;
    margin-top: 5px;
}
.tip-content {
    font-size: 11px;
    width: 70%;
    color: #a1a1a1;
    margin: 10px auto;
}

.report {
    font-size: 11px;
    color: red;
}
</style>